import { useRoutes,Navigate } from "react-router-dom"
import { lazy, Suspense } from "react"
import Loading from "../components/Loading"
//重定向

const Login = lazy(() => import('../pages/Login'))
const List = lazy(() => import('../components/List'))
const Home = lazy(() => import('../pages/Main/Home'))
const About = lazy(() => import('../pages/Main/About'))
const Main = lazy(() => import('../pages/Main'))

//路由懒加载,路由已经打包好了.点击对应的路由才加载对应路由,
//1.下载lazy,Suspense
//2.路由的写法  const Main = lazy(()=>import('./路径'))
//3.路由表的写法   <Subspense fallback={</loading>}> </Main>  </Subspense>
//4.由于每个路由都要用.可以封装一个函数
//const load = function(Comp){ return (<Subspense><Comp/></Subspense>) }



const load = function (Comp) {
  return (
  <Suspense fallback={<Loading />}>
    <Comp />
  </Suspense>)
}
const routes = [
  {
    path: '/login',
    element: load(Login)
  },
  {
    path: '/main',
    element: load(Main),
    children: [
      {
        path: '/main/home',
        element: load(Home),
        children: [
          {
            path: '/main/home/news/:id',
            element: load(List),
          },
          {
            path: '/main/home/music/:id',
            element: load(List),
          },
        ]
      },
      {
        path: '/main/about',
        element: load(About),
      },
    ]
  },
  {
    path: '/',
    element: <Navigate to={'login'}/>
  },
]

export default routes

//定义组件,在组件外层中可以使用hook
export const GetRoutes = () => {
  return useRoutes(routes)
}

//自定义钩子
export const useMyRoutes = () => {
  return useRoutes(routes)
}

